<template>
	<view class="content">
		<cu-custom bgColor="" :isBack="true" :isTitle="false">
			<block slot="backText" class="titilestyle">{{title}}</block>

		</cu-custom>

		<view :style="{height: swiperHeight+'px'}">
			<mescroll-uni :fixed="false" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback"
				@init="mescrollInit" style="height: 100%;" @scroll="pageScroll">

				<view class="new-list" v-for="(item,index) in focusNews" :key="index"  @click="toNews(item)" :class="index==0?'':'marginTop'">
					<view class="new-list-left">
						<text class="new-title">{{item.title}}</text>
						<view class="new-list-bottom school-tag ">
							<text class="tagblue" v-for="(tag,ta) in item.tags" :key="ta" v-if="ta<2">{{tag}}</text>
				
							<view class="news-date">
								{{changeTime(item.created_at).after}}
							</view>
						</view>
					</view>
					<view class="new-list-right">
						<image :src="item.img" mode="aspectFill"></image>

					</view>

				</view>

			</mescroll-uni>
		</view>
	</view>


</template>

<script>
	import MescrollUni from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue"
	export default {
		components: {
			MescrollUni

		},
		data() {
			return {
				title: "最新资讯",
				swiperHeight: '',
				focusNews: [],
				mescroll: null,
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					onScroll: true,
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: ''
				},


			}
		},
		onShow() {
			this.mescroll.resetUpScroll();
		},
		mounted() {
			this.getInfo().then((e) => {
				
				this.swiperHeight = e.screenHeight - (e.custom.top + e.custom.height) - 5;
				
			})
			// this.swiperHeight = this.WH - (this.Custom.top + this.Custom.height) - 5;
		},
		methods: {
			/**
			 * 时间的格式转换
			 * @param {Object} time
			 */
			changeTime1(time) {
				var d = new Date(time);
				let year1 = parseInt(d.getFullYear() - 1970);
				let year = (year1 == 0) ? "" : year1 + "年";
				var month = parseInt((time / 1000 / 60 / 60 / 24 / 30) % 12); //月
				let mon =(year1>0 || month ==0 )?"": month + "月";
				var day1 = parseInt((time / 1000 / 60 / 60 / 24) % 30); //天数
				let day = (month > 0 || year1 > 0 || day1 == 0) ? "" : day1 + "天";
				var hour = parseInt((time / 1000 / 60 / 60) % 24); //小时
				let hours = (month > 0 || year1 > 0 || day1 > 0 || hour == 0) ? "" : hour + "小时";
				var minute = parseInt((time / 1000 / 60) % 60); //  分钟
				let min = (month > 0 || year1 > 0 || day1 > 0 || minute == 0 || hour > 0) ? "" : minute + "分钟";
				let sec = parseInt((time / 1000) % 60); //秒
				sec = ( month > 0 || year1 > 0 || day1 > 0 || minute > 0 || hour > 0 || sec == 0) ? "" : sec + "秒";
				let array = {
					after: year + mon + day+hours + min + sec + "前"
				}
				return array;
			},

			changeTime(time) {
				let end = (new Date(time.replace(/-/g, '/'))).getTime();
				let current = (new Date()).getTime();
				let l =parseInt(current - end);
				return this.changeTime1(l);
			},

			/**
			 * 最新资讯的跳转
			 * @param {Object} item
			 */
			toNews(item) {
				uni.navigateTo({
					url:"/pages/basic/schoolNews?id="+item.id
				
				})

			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll
			},
			downCallback(mescroll) {
				mescroll.resetUpScroll();
			},
			upCallback(mescroll) {
				this.apiRequest('/buyer/NewsList', {
					page: mescroll.num,
					limit: mescroll.size,
					area_id: uni.getStorageSync('area_id'),
				}, 0, 'GET').then(res => {
					if (res.code != 200) {
						mescroll.endSuccess()
					}
					if (mescroll.num == 1) {
						this.focusNews = [];
					}
					this.focusNews = this.focusNews.concat(res.data) //追加新数据
					mescroll.endByPage(this.focusNews.length, res.data.totalPage);

				})
			}

		}

	}
</script>

<style scoped>
	.new-list {
		width: 92%;
		margin: auto;
		height: 200upx;
		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.marginTop{
		margin-top: 20upx;
	}

	.new-list-left {
		width: 56%;
		height: 80%;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.new-list-right {
		margin-left: 3%;
		width: 34%;
		height: 80%;
	}

	.new-title {
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		text-overflow: ellipsis;
		display: -webkit-box;
		line-clamp: 2;
		-webkit-line-clamp: 2;
		overflow: hidden;
		-webkit-box-orient: vertical;
		text-align: justify;
		line-height: 1.2;

	}

	.new-list-bottom {
		width: 100%;
		position: absolute;
		bottom: 0;
		align-items: center;
	}

	.tagblue {
		max-width: 80upx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		color: #3783D0;
		background-color: #E2F0FF;
	}

	.school-tag {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

	}

	.school-tag text {
		font-size: 20upx;
		font-weight: bold;
		border-radius: 4upx;
		padding: 10upx 15upx 10upx 15upx;
		margin-right: 10upx;
	}

	.news-date {
		font-size: 20upx;
		position: absolute;
		float: right;
		right: 0;
		font-family: PingFang SC;
		font-weight: bold;
		color: #999999;
	}

	.new-list-right image {
		width: 100%;
		height: 100%;
		border-radius: 20upx;
	}
</style>
